<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <title>表格内容增删改</title>
  <style>
    table{
      width: 300px;
      margin: 0 auto;
      border-collapse: collapse;
      text-align: center;
    }
    #tab1 td,#tab1 th{
      border: 1px black solid;
    }
    #tab2{
      border: 1px black solid;
    }

  </style>
<script>
  // 删除超链接
  function delA(){
    // 获取tr对象
    var tr = this.parentNode.parentNode;
    var name = tr.children[0].innerHTML;
    var flag = confirm("确认删除"+name+"吗？");
    if(flag){
      // 删除tr
      tr.parentNode.removeChild(tr);
    }

  }
  window.onload = function(){
      // 获取所有的超链接标签
      var allA = document.getElementsByTagName("a");
      for(var i=0;i<allA.length;i++){
        // 点击每个超链接删除对应行
        allA[i].onclick = delA;
      }

      // 添加新员工信息
      var subBtn = document.getElementById("subBtn");
      subBtn.onclick = function(){
        // 获取员工信息
        var name = document.getElementById("name").value;
        var email = document.getElementById("email").value;
        var salary = document.getElementById("salary").value;
        // 创建tr
        var tr = document.createElement("tr");
        // 创建td
        var nameTd = document.createElement("td");
        nameTd.innerHTML = name;
        var emailTd = document.createElement("td");
        emailTd.innerHTML = email;
        var salaryTd = document.createElement("td");
        var aTd = document.createElement("td");
        var a = document.createElement("a");
        a.href = "#";
        a.innerHTML = "Delete";
        aTd.appendChild(a);
        a.onclick = delA;

        salaryTd.innerHTML = salary;
        tr.appendChild(nameTd);
        tr.appendChild(emailTd);
        tr.appendChild(salaryTd);
        tr.appendChild(aTd);
        var tab1 = document.getElementById("tab1");
        var tbody = tab1.getElementsByTagName("tbody")[0];
        tbody.appendChild(tr);
      }
  }
</script>
</head>
<body >
    <div class="box1">
      <table id="tab1">
        <tr>
          <th>Name</th>
          <th>Email</th>
          <th>Salary</th>
          <th></th>
        </tr>
        <tr>
          <td>Tom</td>
          <td>tom@tom.com</td>
          <td>5000</td>
          <td>
            <a href="#">Delete</a>
          </td>
        </tr>
        <tr>
          <td>Jack</td>
          <td>Jack@qq.com</td>
          <td>5500</td>
          <td>
            <a href="#">Delete</a>
          </td>
        </tr>
        <tr>
          <td>Bob</td>
          <td>bob@163.com</td>
          <td>6000</td>
          <td>
            <a href="#">Delete</a>
          </td>
        </tr>
      </table>
      <br><br>
      <table id="tab2">
        <tr>
          <th>添加新员工</th>
          <th></th>
        </tr>
        <tr>
          <td>name：</td>
          <td>
              <input type="text" name="name" id="name"> 
          </td>
        </tr>
        <tr>
          <td>email：</td>
          <td><input type="text" name="email" id="email"></td>
        </tr>
        <tr >
          <td>salary：</td>
          <td><input type="text" name="salary" id="salary"></td>
        </tr>
        <tr >
          <td colspan="2">
              <input type="button" value="Submit" id="subBtn">
          </td>
        </tr>
        
      </table>
      
    </div>
</body>
</html>